<template>
  <!-- 瀑布流 -->
  <vue-waterfall-easy
    class="waterfall"
    ref="waterfall"
    :imgsArr="waterPull"
    srcKey="picUrl"
    @scrollReachBottom="getData"
    :maxCols="2"
  >
    <div class="waterfallSlot" slot-scope="props">
      <p class="title">{{ props.value.content }}</p>
      <div class="bottom">
        <div class="left">
          <img :src="props.value.avatar" />
          <p class="title">{{ props.value.title }}</p>
        </div>
        <div class="right">
          <img src="	https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="" />
          <p class="title">{{ props.value.readCount }}k</p>
        </div>
      </div>
    </div>
    <div slot="waterfall-over">已经到底了~~~</div>
  </vue-waterfall-easy>
</template>

<script>
// 瀑布流插件
import vueWaterfallEasy from "vue-waterfall-easy";
import { mapState } from "vuex";
export default {
  methods: {
    getData() {
      if (this.waterPull.length < 16) {
        let result = this.getWaterPull();
      } else {
        this.$refs.waterfall.waterfallOver();
      }
    },
  },
  // 注册组件
  components: {
    vueWaterfallEasy,
  },
  // 计算属性
  computed: {
    ...mapState({
      waterPull: (state) => {
        let list = state.worth.waterPullList.map((item) => {
          return item.look;
        });
        return list;
      },
    }),
  },
  methods: {
    // 获取瀑布流数据
    getWaterPull() {
      this.$store.dispatch("worth/getWaterPull");
    },
    getData() {
      if (this.waterPull.length < 32) {
        let result = this.getWaterPull();
      } else {
        this.$refs.waterfall.waterfallOver();
      }
    },
  },
  mounted() {
    this.getWaterPull();
  },
};
</script>

<style lang="less" scoped>
.waterfall {
  margin-top: 115px;
  margin-bottom: 50px;
  .waterfallSlot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .title {
      font-size: 15px;
      margin-left: 5px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        img {
          margin: 5px;
          height: 24px;
          width: 24px;
          border-radius: 50%;
        }
        .title {
          font-size: 12px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        img {
          margin-left: 5px;
          height: 16px;
          width: 16px;
        }
        .title {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
